<template>
	<view class="container">
		<view class="box">
			<view class="item">
				<view style="font-size: 16px;white-space: nowrap;">姓名：</view>
				<input type="text" placeholder="请填写真实姓名" v-model="name" style="width: 80%;">
			</view>
			<view class="item">
				<view style="font-size: 16px;white-space: nowrap;">电话：</view>
				<input type="text" placeholder="请填写电话号码" v-model="phone" style="width: 80%;">
			</view>
			<view class="item">
				<view style="font-size: 16px;white-space: nowrap;">地址：</view>
				<view class="picker" style="display: flex;align-items: center;font-size: 14px;" @click="selectMap">
					<view style="width: 280px;text-align: right;">{{pcd}}</view>
					<image style="width: 15px;margin: 0;" mode="widthFix" src="../../static/right.png"></image>
				</view>
			</view>
			<view class="item" style="border-bottom: 0;align-items: flex-start;padding-right: 3px;">
				<view style="font-size: 16px;white-space: nowrap;">详细地址：</view>
				<textarea type="text" placeholder="例如: 1楼101室" v-model="specific" style="width: 80%;height: 50px;margin-top: 3px;text-align: right;" />
			</view>
		</view>
		<view class="addAddress">
			<view class="addButton" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	import { addressSave, getUserInfo } from '@/api/home.js'
	import amapFile from '@/utils/amap-wx.130.js'
	export default {
		data() {
			return {
				id:'',
				name:'',
				phone:'',
				pcd:'',
				detail:'',
				specific:'',
				longitude:'',
				latitude:'',
				addressNo:'',
				region: []
			}
		},
		onLoad(options) {
			getUserInfo().then(res=>{
				this.phone = res.data.phone
			})
			let editData = options.item?JSON.parse(options.item):null
			if(editData){
				this.name = editData.name,
				this.phone = editData.phone
				this.detail = editData.detail.replace(new RegExp(editData.specific, 'g'), '')
				this.pcd = editData.province+editData.city+editData.district+editData.detail.replace(new RegExp(editData.specific, 'g'), '')
				this.latitude = Number(editData.lat)
				this.longitude = Number(editData.lng)
				this.id = editData.id
				this.specific = editData.specific
			}
		},
		methods:{
			getAddress(latitude, longitude, detail){
				return new Promise((reslove,reject)=>{
					let myAmapFun = new amapFile.AMapWX({ key: "abd3c8a41b3f1b099af2646d6944e339" });
					myAmapFun.getRegeo({
					  location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'
					  success: function (data) {
					    let {province,city,district} = data[0].regeocodeData.addressComponent;
					    city = (city || city?.length>0) ? city:"";
						reslove({
							province,city,district,repl:province+city+district
						})
					  },
					  fail: function (info) { }
					})
				})
			  
			},
			selectMap(){
				let that = this
				uni.chooseLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						let str = res.address
						that.pcd = str
						that.longitude = res.longitude
						that.latitude = res.latitude
					}
				});
			},
			onChangeRegion(e) {
			  this.region = e.target.value;
			},
			toMap(){
				if(!this.pcd) return uni.showModal({
					title:"请选择地址",
					icon:'none'
				})
				uni.navigateTo({
					url:'/pages/addressMap/index?city='+this.region+'&detail='+this.detail
				})
			},
			async submit (){
				if(!this.pcd) return uni.showToast({
					title:'请选择地址',
					icon:'none'
				})
				uni.showLoading({
				    title: '加载中'
				});
				let data = {
					name: this.name,
					phone:this.phone,
					detail: '',
					province: '',
					city: '',
					district: '',
					lng: this.longitude,
					lat: this.latitude,
					specific: this.specific
				}
				await this.getAddress(this.latitude,this.longitude).then(res=>{
					data.province = res.province
					data.city = res.city
					data.district = res.district
					let str = this.pcd.replace(new RegExp(res.repl, 'g'), '')
					data.detail = str + this.specific
				})
				if(this.id) data.id = this.id
				addressSave(data).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title: res.message,
						icon:'none'
					})
					uni.navigateBack({delta:1})
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.container{
		padding: 10px;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.addAddress{
			height: calc(10vh - 20px);
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 4px;
			.addButton{
				width: 90%;
				background-color: #2c6cf4;
				color: #fff;
				text-align: center;
				padding: 10px 30px;
				border-radius: 6px;
				box-sizing: border-box;
				font-size: 14px;
			}
		}
		.box{
			background-color: #fff;
			border-radius: 4px;
			padding: 10px;
			box-sizing: border-box;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 0;
				border-bottom: 1px solid #f5f5f5;
				input{
					text-align: right;
					font-size: 14px;
				}
			}
		}
	}
</style>